<template>
  <div class="main">
      <div class="city-list">
          <div class="header">
              <div class="left" @click="go()"><i class="iconfont icon-guanbi"></i></div>
              <div class="title">当前城市</div>
          </div>
          <div class="search-city-input">
              <div class="input-wrap">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="输入城市名或拼音">
              </div>
          </div>
          <div class="city-wrap">
              <div class="command-city">
                  <div class="gps-city">
                      <div class="gps-title">GPS定位你所在的城市</div>
                      <ul class="index-detail">
                          <li class="item-detail" @click="city.slice(0,2)">
                              <div class="item-text">{{city}}</div>
                          </li>
                      </ul>
                  </div>
                  <div class="hot-city gps-city">
                      <div class="hot-title gps-title">
                          热门城市
                      </div>
                      <ul class="index-detail">
                          <li class="item-detail">
                              <div class="item-text" @click="change('北京')">北京</div>
                          </li>
                          <li class="item-detail">
                              <div class="item-text"  @click="change('上海')">上海</div>
                          </li>
                          <li class="item-detail">
                              <div class="item-text"  @click="change('广州')">广州</div>
                          </li>
                          <li class="item-detail">
                              <div class="item-text" @click="change('深圳')">深圳</div>
                          </li>
                      </ul>
                        <!-- <mt-index-list :show-indicator="false">
                            <div v-for="(item,index) in list" :key="index">
                                <mt-index-section :key="index" v-if="index === 0 || index !== 0 && item.letter !== list[index-1].letter" :index="item.letter" >
                                    
                                </mt-index-section>
                                <mt-cell :title="item.name" @click="goto(item.cityId)">
                                    
                                    </mt-cell>
                                
                            </div>
                        </mt-index-list> -->
                       
                        
                  </div>
                  <div class="citylist" v-for="(item,index) in list" :key="item.cityId" @click="go(item.cityId,item.name)">
                      <ul>
                          <p v-if="index === 0 || index !== 0 && item.letter !== list[index-1].letter" :index="item.letter">{{item.letter}}</p>
                          <li>
                              <div class="name">{{item.name}}</div>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getLocation} from '@/api'
import getcity from '@/module/getlocation.js'
import Bus from '@/components/bus/bus.js'
export default {
    data() {
        return {
            list:[],
            indexList:[],
            city:'',
            cityId:'',
            cityName:''
        }
    },
    created() {
        getLocation().then((res) => {
            console.log(res)
            if(res.status === 200) {
                this.list = res.data.data.cities.sort((a,b)=>a.pinyin.localeCompare(b.pinyin)).map((item) => {
                    
                    return {
                        'letter': item.pinyin[0].toUpperCase(),
                        'name':item.name,
                        'cityId':item.cityId
                    }
                })
                this.getcity()
            }

        })
        
    },
    methods:{
        go(cityId,cityName) {
            
            localStorage.setItem('cityId',JSON.stringify(cityId));
            localStorage.setItem('cityName',JSON.stringify(cityName))
            this.$router.push('/film')
        },
        getcity(){
            getcity(city=>{
                this.city = city.slice(0,2);
                var city = this.list.filter(info=>{
                    return info.name === this.city
                })
                console.log(city)
                this.cityName = city[0].name
                this.cityId = city[0].cityId
                localStorage.setItem('cityId',JSON.stringify(this.cityId));
                localStorage.setItem('cityName',JSON.stringify(this.cityName))
            })
        },
        change(name){
            var city = this.list.filter(item=>{
                return item.name ===name
            })
            console.log(city)
            this.cityName = city[0].name
            this.cityId = city[0].cityId
            this.go(this.cityId,this.cityName)
        }
    }
}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 .city-list{
     height:100%;
    background: #fff;
    z-index: 99;
    .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 44px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        z-index: 300;
        background: #fff;
        .left {
            width: 14%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            i {
                display: block;
                // font-size: 23px;
                color: #191a1b;
                font-size: 19px;
                margin-left:10px;
            }
        }
        .title {
            width: 72%;
            text-align: center;
            font-size: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #191a1b;
        }
    }
    .header>div {
        float: left;
        height: 44px;
    }
    .header:after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #ededed;
        color: #ededed;
        transform-origin: 0 100%;
        transform: scaleY(.5);
    }
    .search-city-input {
        z-index: 2000;
        height: 49px;
        width: 100vw;
        padding: 9.5px 15px;
        background-color: #f4f4f4;
        position: fixed;
        top: 44px;
        .input-wrap {
            background-color: #fff;
            position: relative;
            display: inline-block;
            border-radius: 3px;
            width: 100%;
            height: 30px;
            i{
                position: absolute;
                left: 7px;
                top: 0;
                line-height: 30px;
                font-size: 21px;
                color: #797d82; 
                font-size: 20px;
            }
            input{
                position: absolute;
                left: 33.5px;
                top: 0;
                height: 30px;
                width: calc(100% - 65px);
                border: 0;
                color: #2c3e50;
            }
        }
    }
    .city-wrap{
        padding-top: 94px;
        width: 100%;
        position: relative;
        overflow: hidden;
        .command-city{
            // margin-right: 17px;
            // z-index: 3000;
            // height: 100vh !important;
            // overflow: auto;
            background-color: #fff;
            padding-left: 15px;
            padding-top: 15px;
            .gps-title{
                font-size: 13px;
                color: #797d82;
                margin-bottom: 10px;
            }
            .index-detail{
                display: flex;
                justify-content: flex-start;
                align-content: center;
                flex-wrap: wrap;
                .item-detail{
                    width: calc((100vw - 33px)/3);
                    text-align: center;
                    padding-bottom: 15px;
                    box-sizing: border-box;
                    float: left;
                   .item-text {
                        height: 30px;
                        background-color: #f4f4f4;
                        line-height: 30px;
                        border-radius: 3px;
                        box-sizing: border-box;
                        margin: 0 7.5px;
                        font-size: 14px;
                        color: #191a1b;
                    }
                }
            }
            
        }
    }
 }
 

         
          p {
            width: 100%;
            box-sizing: border-box;
            padding-left: 4vw;
            background-color: #f4f4f4;
            color: #797d82;
            padding: 0 0 0 4vw;
            height: 8vw;
            line-height: 8vw;
          }
          ul {
            width: 100%;
            li {
              box-sizing: border-box;
              padding-left: 5.32vw;
              color: #191a1b;
              height: 12.9vw;
              line-height: 12.9vw;
              div {
                border-bottom: 0.26vw solid #ededed;
              }
            }
          }

</style>